import React, { Component } from 'react'
import './classify.scss';

import request from '../../../util/request'

import {LItem,RItem} from '../../../types/classify'

import CItem from '../../../component/c-item/c-item'

interface IState{
    lClassify:LItem[],
    rClassify:RItem[]
}

export default class Classify extends Component<{},IState>{
    async componentDidMount(){
        //请求左边的分类
        let lRes = await request.get('/api/lClassify');
        //第一个分类的id

        if(lRes.data.code === 1){
            let id = lRes.data.data[0].id;
            //右侧的数据
            let rRes = await request.get('/api/rClassify',{pid:id});

            if(rRes.data.code === 1){
                this.setState({
                    lClassify:lRes.data.data,
                    rClassify:rRes.data.data
                })
            }
        }
    }

    state = {
        lClassify:[],
        rClassify:[]
    }
     render() {
         let {lClassify,rClassify} = this.state;
        return (
            <div className="classify-wrap">
                <div className="left">
                    <ul>
                        {lClassify.length && lClassify.map((item:LItem) => <li key={item.id} onClick={() => {
                            this.changeType(item.id)
                        }}>{item.title}</li>)}
                   </ul>
                </div>

                <div className="right">
                    {
                        rClassify.length && rClassify.map((item:RItem) => <div key={item.title}>
                            <h4>{item.title}</h4>
                            <div className="r-classify-wrap">
                                {item.list && item.list.map((v:LItem) => <CItem key={v.id} item={v}></CItem>)}
                            </div>
                        </div>)
                    }
                </div>
            </div>
        )
    }

    //切换分类
    changeType =  async(id:number) => {
        let rRes = await request.get('/api/rClassify',{pid:id});
        if(rRes.data.code === 1){
            this.setState({
                rClassify:rRes.data.data
            })
        }
    }
}


//作业：京东后台，京东前端
